<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>找回密码_资源共享平台</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <style type="text/css">
        .layui-container {
            max-width: 600px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <form class="layui-form" name="myForm" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">邮&nbsp;&nbsp;箱：</label>
            <div class="layui-input-block">
                <input id="email" type="text" name="email" placeholder="请输入您注册用时候的邮箱" class="layui-input" lay-verify="required|email" lay-reqText="请输入邮箱" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码：</label>
            <div class="layui-input-block">
                <input type="text" name="captcha" class="layui-input" style="width: 68%;display: inline-block;" lay-verify="required" lay-reqText="请输入验证码" />
                <button id="captchaBtn" class="layui-btn" style="width: 30%;">获取验证码</button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="*">提交</button>
                &nbsp;&nbsp;<label id="errorInfo" style="color: red;"></label>
            </div>
        </div>
    </form>
</div>

<script src="/layui/layui.js"></script>
<script type="text/javascript" th:inline="javascript">
    let $, layer, form;
    layui.use(['layer', 'form', 'element'], function () {
        $ = layui.jquery,
            layer = layui.layer,
            form = layui.form;

        $("#captchaBtn").click(function () {
            sendEmail();
            return false;
        });

        // 监听提交
        form.on('submit(*)', function (data) {
            $("#errorInfo").text("");

            // 重置密码
            $.post("/user/resetPassword", data.field, function (result) {
                if (result.success) {
                    layer.alert("已通过验证，密码已经重置成123456，请登录后立刻修改密码！");
                    parent.reloadPage();
                } else {
                    $("#errorInfo").text(result.errorInfo);
                }
            }, "json");
            return false;
        });
    });

    function sendEmail() {
        $("#errorInfo").text("");

        let email = $("#email").val();
        if (email == undefined || email == "") {
            $("#errorInfo").text("请输入邮件！");
            $("#email").focus();
            return false;
        }
        $.post("/user/sendEmail", {email: email}, function (result) {
            if (result.success) {
                $("#captcha").focus();
                layer.alert("验证码已发送到您的邮箱，请注意查收，假如长时间未收到遇见，请联系管理员！");
                $("#captchaBtn").attr({"disabled": "disabled"});
            } else {
                $("#errorInfo").text(result.errorInfo);
            }
        }, "json");
    }
</script>
</body>
</html>